var myChart = echarts.init(document.getElementById('main'));


var uploadedDataURL = "./js/songshan_new.json";

$.getJSON(uploadedDataURL, function (geoJson) {
    echarts.registerMap('songshan_new', geoJson);


    var COLORS = ["#070093", "#d5291f", "#1482e5", "#70b4eb", "#b4e0f3", "rgba(255,255,255,0)"];
    var lngExtent = [kilxs[0],kilxs[1]];
    var latExtent = [kilys[0],kilys[1]];
    var cellCount = [kilxz, kilyz];
    var cellSizeCoord = [
        (lngExtent[1] - lngExtent[0]) / cellCount[0],
        (latExtent[1] - latExtent[0]) / cellCount[1]
    ];


    function renderItem(params, api) {
        var lngIndex = api.value(0);
        var latIndex = api.value(1);
        var pointLeftTop = getCoord(params, api, lngIndex, latIndex);
        var pointRightBottom = getCoord(params, api, lngIndex + 1, latIndex + 1);

        return {
            type: 'rect',
            shape: {
                x: pointLeftTop[0],
                y: pointLeftTop[1],
                width: pointRightBottom[0] - pointLeftTop[0],
                height: pointRightBottom[1] - pointLeftTop[1]
            },
            style: api.style({
                stroke: 'rgba(0,0,0,0.1)'
            }),
            styleEmphasis: api.styleEmphasis()
        };
    }

    function getCoord(params, api, lngIndex, latIndex) {
        var coords = params.context.coords || (params.context.coords = []);
        var key = lngIndex + '-' + latIndex;

        // bmap returns point in integer, which makes cell width unstable.
        // So we have to use right bottom point.
        return coords[key] || (coords[key] = api.coord([
                +(latExtent[0] + lngIndex * cellSizeCoord[0]).toFixed(6),
                +(lngExtent[0] + latIndex * cellSizeCoord[1]).toFixed(6)
            ]));
    }

    console.log(lngExtent);
    console.log(latExtent);



    var option = {
        tooltip: {},
        visualMap: {
            type: 'piecewise',
            inverse: true,
            top: 10,
            left: 10,
            pieces: [{
                value: 0, color: COLORS[0]
            }, {
                value: 1, color: COLORS[1]
            }, {
                value: 2, color: COLORS[2]
            }, {
                value: 3, color: COLORS[3]
            }, {
                value: 4, color: COLORS[4]
            }, {
                value: 5, color: COLORS[5]
            }],
            borderColor: 'raba(255,255,255,0)',
            borderWidth: 0,
            backgroundColor: '#eee',
            dimension: 2,
            inRange: {
                color: COLORS,
                opacity: 0.7
            }
        },
        series: [
            {
                type: 'custom',
                coordinateSystem: 'geo',
                renderItem: renderItem,
                aspectScale:1.0,
                animation: false,
                itemStyle: {
                    emphasis: {
                        color: 'yellow'
                    }
                },
                encode: {
                    tooltip: 2
                },
                data: data
            }
        ],
        geo: {
            type: "map",
            map: "songshan_new",
            aspectScale:1.0,
            roam: true,
            label: {
                emphasis: {
                    show: false
                }
            },
            itemStyle: {
                normal: {
                    areaColor: '#e6e6e6',
                    borderColor: '#111'
                },
                emphasis: {
                    areaColor: '#e6e6e6'
                }
            }
        }
    };

    myChart.setOption(option);
})